<template>
  <div>
    <a-table
      v-model:selected-keys="keys"
      :row-key="table.rowKey"
      :row-selection="{
        selectedRowKeys: keys,
        showCheckedAll: true
      }"
      :loading="table.loading"
      :data="table.data"
      :bordered="false"
      class="table-container"
      :columns="translateColumns(columns.columns)"
      :pagination="{
        current: query.pageNum,
        total: query.total,
        pageSize: query.pageSize,
        showTotal: true
      }"
      :scroll="{ x: '120%' }"
      @page-size-change="pageSizeChange"
      @page-change="pageChange"
    >
      <template #operation="{ record }">
        <div class="flex gap-2 justify-center">
          <a-dropdown-button trigger="click" size="mini" @click="dispatch(record)">
            {{ t["编辑"] }}
            <template #content>
              <a-doption @click="edit(record.mediaId)">
                <template #icon>
                  <IconSend />
                </template>
                {{ t["设置"] }}
              </a-doption>
              <a-doption @click="unbound(record.mediaId)">
                <template #icon>
                  <IconClose />
                </template>
                {{ t["解绑"] }}
              </a-doption>
            </template>
          </a-dropdown-button>
        </div>
      </template>

      <template #status="{ record }">
        <span :style="{ color: record.status !== '0' ? 'red' : 'green' }">
          {{ t[isOnline(record.status)] }}
        </span>
      </template>
      <template #goodsName="{ record }">
        <div class="flex gap-2">
          <a-tag v-for="(item, k) in record.goodsName.split(',')" v-show="item" :key="k">
            {{ item }}
          </a-tag>
        </div>
      </template>
      <template #display="{ record }">
        <div>
          <a-switch
            v-model="record.display"
            checked-value="1"
            unchecked-value="0"
            @change="changeDisplay(record)"
          >
            <template #checked> {{ t["显示"] }} </template>
            <template #unchecked> {{ t["隐藏"] }} </template>
          </a-switch>
        </div>
        <a-switch
          v-model="record.conn"
          checked-value="0"
          unchecked-value="1"
          @change="changeConnect(record)"
        >
          <template #checked> {{ t["长链接"] }} </template>
          <template #unchecked> {{ t["短链接"] }} </template>
        </a-switch>
      </template>
      <template #label="{ record }">
        <a-select v-model="record.label" multiple :options="labelOptions">
          <template #footer>
            <div class="text-right py-4 px-4">
              <a-button type="primary" @click="changeGroup(record)">{{ t["确定"] }}</a-button>
            </div>
          </template>
        </a-select>
      </template>
    </a-table>
    <Group />
  </div>
</template>

<script setup lang="ts">
import { isOnline } from "@/data/options/status";

import { deviceConfig, labelGroup } from "@/api/service/lcd-device/lcd-device";
import { Media } from "@/api/service/lcd-device/types";
import columns from "../data/column";
import { dispatch, edit, getLabelOptions, list, unbound } from "../data/curd";
import { keys, labelOptions, query, table } from "../data/table";
import Group from "./Group.vue";

const t = translate("公共模块");

onMounted(async () => {
  await list();
  getLabelOptions();
});

const pageChange = (page: number) => {
  query.value.pageNum = page;
  list();
};

const pageSizeChange = (pageSize: number) => {
  query.value.pageNum = pageSize;
  list();
};
const changeDisplay = async (record: Media) => {
  await deviceConfig({
    display: record.display,
    conn: record.conn,
    mediaIds: [record.mediaId]
  });
  list();
};

const changeConnect = async (record: Media) => {
  await deviceConfig({
    display: record.display,
    conn: record.conn,
    mediaIds: [record.mediaId]
  });
  list();
};
const changeGroup = async (record: Media) => {
  let label: string = (record.label as string[]).join(",");
  if (label.startsWith(",")) {
    label = label.slice(1);
  }
  await labelGroup({
    label,
    mediaIds: [record.mediaId]
  });
  list();
};
</script>

<style lang="scss" scoped></style>
